<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AOS</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script type="text/javascript" src="./js/qrcode.js"></script>
    <script src="js/config.js"></script>

    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="x-body">
    <button class="layui-btn" onclick="x_admin_show('添加','./admin-add.html')"><i class="layui-icon"></i>添加</button>
<!--    <button class="layui-btn" onclick="x_admin_show('日志','./log-list.html')"><i class="layui-icon"></i>查看日志</button>-->
    <table class="" id="table"></table>
</div>

<div id="qrcode" style="margin-top: -96px"></div>


<script type="text/html" id="barDemo">
    <i onclick="editActivity(this)" class="layui-icon"
       style="cursor: pointer">&#xe642;</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <i onclick="download(this)" class="layui-icon" style="cursor: pointer">&#xe601;</i>
</script>

<script>
    //数据表数据加载
    layui.use('table', function () {

        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#table'
            , height: 600
            , url: 'http://' + IPADDRESS + ':' + PORT + '/activity/getActivityList' //数据接口
            , method: 'post'
            , request: {
                pageName: 'page_num' //页码的参数名称，默认：page
                , limitName: 'page_size' //每页数据量的参数名，默认：limit
            }
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.header.res_code, //解析接口状态
                    "msg": res.header.message, //解析提示文本
                    "count": res.body.total, //解析数据长度
                    "data": res.body.activity_list //解析数据列表
                };
            }
            , response: {
                statusCode: 200000 //规定成功的状态码，默认：0
            }
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'activity_key', title: '活动编号', width: '14%'}
                , {field: 'theme', title: '活动主题', width: '14%'}
                , {field: 'total', title: '发圈总数', width: '14%'}
                , {field: 'count', title: '剩余总数', width: '14%'}
                , {field: 'people', title: '参与人数', width: '14%'}
                , {field: 'begin_time', title: '开始时间', width: '14%'}
                , {title: '操作', field: 'right', align: 'center', toolbar: '#barDemo'}
            ]]
            , limit: 5
            , limits: [5, 10, 20]
            , loading: true
            , id: 'coupontable'
        });
    });

    //相应下载按钮
    function download(p) {
        var activity_key = $(p).parent().parent().parents().eq(0).prevObject[0].innerText.substring(0, 32);
        $.ajax({
            url: "http://" + IPADDRESS + ":" + PORT + "/activity/getActivityUrl/",
            type: "POST",
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify({
                activity_key: activity_key
            }),
            dataType: 'text',
            success: function (data) {
                var obj = JSON.parse(data);
                if (obj.header.res_code == "200000") {
                    var qrcode = new QRCode(document.getElementById("qrcode"), {
                        width: 96,//设置宽高
                        height: 96
                    });
                    createQrcode('http://' + IPADDRESS + ':' + PORT8888 + '/home.html?activitykey=' + activity_key);
                    layer.open({
                        type: 1,
                        content: $('#qrcode'),
                        btn: ['下载'],
                        yes: function (index, layero) {
                            downloadQrcode();
                            var qrcode = document.getElementById('qrcode');
                            qrcode.innerHTML = '';
                            layer.close(index);
                        },
                        end: function () {
                            var qrcode = document.getElementById('qrcode');
                            qrcode.innerHTML = '';
                        },
                        resize: false,
                        scrollbar: false,
                        maxWidth: 300,
                        offset: '50px'
                    });
                } else {
                    layer.alert(obj.message, {
                        icon: 5,
                        title: "提示"
                    });
                }
            }
        })
    }

    //编辑
    function editActivity(p) {
        var activity_key = $(p).parent().parent().parents().eq(0).prevObject[0].innerText.substring(0, 32);
        var index = layui.layer.open({
            title: "编辑用户",
            type: 2,
            content: "./admin-update.html",//弹出层页面
            area: [$(window).width() * 0.9 + 'px', $(window).height() - 50 + 'px'],
            success: function (layero, index) {
                var body = layui.layer.getChildFrame('body', index);
                $.ajax({
                    url: "http://" + IPADDRESS + ":" + PORT + "/activity/getActivityById/",
                    type: "POST",
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    data: JSON.stringify({
                        'activity_key': activity_key
                    }),
                    success: function (obj) {
                        if (obj.header.res_code == "200000") {
                            // 取到弹出层里的元素，并把编辑的内容放进去
                            body.find(".activity_key").val(obj.body.activity_key);
                            body.find(".theme").val(obj.body.theme);
                            body.find(".begin_time").val(obj.body.begin_time);
                            body.find(".end_time").val(obj.body.end_time);
                            body.find(".share_url").val(obj.body.share_url);
                            body.find(".sharebtn_url").val(obj.body.sharebtn_url);
                            body.find(".receivebtn_url").val(obj.body.receivebtn_url);
                            body.find(".background_url").val(obj.body.background_url);
                            body.find(".background_color").val(obj.body.background_color);
                            layui.form.render();
                        } else {
                            layer.alert(obj.message, {
                                icon: 5,
                                title: "提示"
                            });
                        }
                    }
                })

            },
            end: function () {
                window.location.reload();
            }
        })
    }

    //创建二维码
    function createQrcode(url) {
        qrcode1 = new QRCode(document.getElementById("qrcode"), {
            text: url,
            width: 200, //生成的二维码的宽度
            height: 160, //生成的二维码的高度
            colorDark: "#000000", // 生成的二维码的深色部分
            colorLight: "#ffffff", //生成二维码的浅色部分
            correctLevel: QRCode.CorrectLevel.H
        });
    }

    //下载
    function downloadQrcode() {
        var qrcode = document.getElementById('qrcode');
        var img = qrcode.getElementsByTagName('img')[1];
        var link = document.createElement("a");
        var url = img.getAttribute("src");
        link.setAttribute("href", url);
        link.setAttribute("download", '二维码.png');
        link.click();
    }

</script>
</body>
</html>
